
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    mode: "development",      //production 压缩形式
    devtool:'cheap-module-eval-source-map',     //线下测试 打开  线上关闭  并 mode = production
    devServer:{
        contentBase:"./dist",
        open:true
    },
    entry: {
        main:"./src/index.js",  //同样的文件打包两份
    },   //入口文件
    output: {
        // publicPath:'http://www.taob.com',   //指定头部
        filename: '[name].js',  //出口文件
        path: path.resolve(__dirname, 'dist'),  //__dirname 指的是 config.js 所在的目录下的位置
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {                      //配置参数
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',       //指定图片打包后存放的位置
                    limit: 10240
                }
            }
        }, {
            test: /\.(css|scss)$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        // modules: true   给Css 起个名字 css模块化写法
                    }
                },
                'sass-loader',
                'postcss-loader',   //解决css3样式前缀
            ]
        }, {
            test: /\.(eot|ttf|svg|woff)$/,    //字体文件的打包
            use: {
                loader: 'file-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'page/index.html'
        }),
        new CleanWebpackPlugin()  //打包之前删除指定的文件
    ]



}



































